<template>
    <div>
        <div class="search">
            <input type="text" placeholder="请输入城市名或者拼音" class="search-input" v-model="keyword">
        </div>
        <div
        class="search-content"
        ref="search"
        v-show="keyword"
        >
        <ul>
            <li
            class="search-item border-bottom"
            v-for="item in list"
            :key="item.key"
            @click="handleCityClick(item.name)"
            >
           {{item.name}}
            </li>
            <li class="search-item border-bottom" v-show="hasNoData">
            没有找到匹配数据
            </li>
        </ul>
        </div>
    </div>
</template>
<script>
import {mapMutations} from 'vuex' 
export default {
    name:'CitySearch',
    props:{
        cities:{
            type:Object,
            default(){
                return {}
            }
        },

    },
    data(){
        return {
            keyword:'',
            list:[]
        }
    },
    computed:{
        hasNoData(){
            return !this.list.length
        }
    },
    watch:{
        keyword(newValue){
            if(this.timer){
                clearTimeout(this.timer)
            }
             if (!this.keyword) {
                this.list = []
                return
            }
           this.timer = setTimeout(() => {
                let result = []
                for (const key in this.cities) {
                    this.cities[key].forEach(item=>{
                        if(item.spell.indexOf(newValue) >-1 || item.name.indexOf(newValue) > -1){
                            result.push(item)
                        }
                    })
                }
                this.list = result
           }, 200);
        }
    },
    methods:{
        handleCityClick(city){
           this.setCity(city)
        },
         ...mapMutations({
            setCity:'SET_CITY'    
        })
    },
    mounted(){
        
        
    }
}
</script>
<style lang="stylus" scoped>
@import '../assets/styles/varibles.styl'
.search 
  height .72rem
  padding 0 .1rem
  background $bgColor  
  .search-input
    width 100%
    height .62rem
    line-height .62rem
    text-align center
    padding 0 .1rem 
    box-sizing border-box
    border-radius .06rem
    color #666
.search-content
  z-index: 1
  overflow: hidden
  position: absolute
  top: 1.58rem
  left: 0
  right: 0
  bottom: 0
  background: #eee
  .search-item
    line-height: .62rem
    padding-left: .2rem
    background: #fff
    color: #666    
</style>